<!--分类管理-->
<template>
  <div class="cata-log">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-fenlei" />
        </div>
        <span>分类管理</span>
      </div>
      <div slot="extra">
        <a-cascader :options="options" placeholder="请选择全宗" @change="onChange" />
      </div>
      <div class="card-table">
        <div class="cata-left" :style="{width: (isShowLeftTree ? '0': '18%')}">
          <div class="cata-left-title" v-if="!isShowLeftTree">
            门类归档方式
          </div>
          <div class="cata-left-tree" v-if="!isShowLeftTree">
            <a-tree
              blockNode
              :treeData="leftTreeData"
              defaultExpandAll
              v-if="leftTreeData.length > 0">
            </a-tree>
            <a-empty v-else />
          </div>
          <div class="handle" @click="treeToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="cata-right" :style="{width: (isShowLeftTree ? 'calc(100% - 1px)': '82%')}">
          <el-tabs type="border-card">
            <el-tab-pane label="分类树">
              <div class="button-group">
                <a-button type="primary" icon="plus" @click="cataClick('add')" class="icon-button">一级</a-button>
                <a-button type="primary" icon="plus" @click="cataClick('addChild')" class="icon-button">子级</a-button>
                <a-button icon="edit" @click="cataClick('edit')" class="icon-button">编辑</a-button>
                <a-button icon="delete" @click="cataClick('del')" class="icon-button">删除</a-button>
                <a-button icon="copy" @click="cataClick('copy')" class="icon-button">复制</a-button>
                <a-button icon="plus-square" @click="cataClick('paste')">粘贴</a-button>
              </div>
              <div class="cata-tree">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                  <a-tree
                    show-line
                    :treeData="treeData"
                    defaultExpandAll>
                  </a-tree>
                </el-scrollbar>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </a-card>

    <!-- 分类管理弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogFormVisible"
      @ok="handleOk"
      width="60%">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="分类代码">
              <a-input v-decorator="[ 'Catalog_Code', {rules: [{ required: true, message: '请输入分类代码' }]} ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="级别">
              <a-input type="number" v-decorator="[ 'Catalog_Level' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="分类名称">
              <a-input v-decorator="[ 'Catalog_Name', {rules: [{ required: true, message: '请输入分类名称' }]} ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="顺序号">
              <a-input type="number" v-decorator="[ 'Catalog_Order' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="默认保管期限">
              <a-select v-decorator="[ 'Catalog_BGQX']">
                <a-select-option value="永久">永久</a-select-option>
                <a-select-option value="30年">30年</a-select-option>
                <a-select-option value="10年">10年</a-select-option>
                <a-select-option value="长期">长期</a-select-option>
                <a-select-option value="短期">短期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="分类备注">
              <a-input v-decorator="[ 'Catalog_Remark' ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否降序">
              <a-checkbox v-decorator="[ 'Catalog_IsDesc', { valuePropName: 'checked', initialValue: true } ]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否展开">
              <a-checkbox v-decorator="[ 'IsExpanded', { valuePropName: 'checked', initialValue: true } ]" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="可选保管期限:"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }">
              <el-table
                :data="tableData"
                highlight-current-row
                border
                :row-style="{height:'40px'}"
                :cell-style="{padding:'0px'}"
                :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="DDL_Order"
                  label="顺序号"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
                <el-table-column
                  prop="DDL_Code"
                  label="保管期限代码"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
                <el-table-column
                  prop="DDL_Value"
                  label="保管期限名称"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
              </el-table>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'CataLog',
  components: {
  },
  data () {
    return {
      options: [{
        value: '选项1',
        label: '研发中心测试全宗'
      }],
      isShowLeftTree: false,
      leftTreeData: [],
      treeData: [
        {
          title: '1990-1999 1990年-1999年',
          key: '1',
          children: [
            { title: '1990 1990年', key: '1-0' },
            { title: '1991 1991年', key: '1-1' },
            { title: '1992 1992年', key: '1-2' },
            { title: '1993 1993年', key: '1-3' },
            { title: '1994 1994年', key: '1-4' },
            { title: '1995 1995年', key: '1-5' },
            { title: '1996 1996年', key: '1-6' },
            { title: '1997 1997年', key: '1-7' },
            { title: '1998 1998年', key: '1-8' },
            { title: '1999 1999年', key: '1-9' },
            { title: '2000 2000年', key: '2-0' },
            { title: '2001 2001年', key: '2-1' },
            { title: '2002 2002年', key: '2-2' },
            { title: '2003 2003年', key: '2-3' },
            { title: '2004 2004年', key: '2-4' },
            { title: '2005 2005年', key: '2-5' },
            { title: '2006 2006年', key: '2-6' }
          ]
        }
      ],
      modalTitle: '', // 分类管理弹出框标题
      dialogFormVisible: false, // 分类管理弹出框显示与隐藏
      form: this.$form.createForm(this),
      tableData: [ // 分类管理弹出框内可选保管期限表格数据
        {
          DDL_Order: 1,
          DDL_Code: '1',
          DDL_Value: '永久'
        },
        {
          DDL_Order: 2,
          DDL_Code: '2',
          DDL_Value: '30年'
        },
        {
          DDL_Order: 3,
          DDL_Code: '3',
          DDL_Value: '10年'
        },
        {
          DDL_Order: 4,
          DDL_Code: '4',
          DDL_Value: '长期'
        },
        {
          DDL_Order: 5,
          DDL_Code: '5',
          DDL_Value: '短期'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    onChange (value) {
      this.leftTreeData = [
        {
          title: '科研档案以件整理',
          key: '1'
        },
        {
          title: '党群档案以件整理',
          key: '2'
        },
        {
          title: '诉讼档案',
          key: '3'
        }
      ]
    },
    // 左侧显示与隐藏事件
    treeToggle () {
      this.isShowLeftTree = !this.isShowLeftTree
    },
    cataClick (val) {
      switch (val) {
        case 'add':
          this.modalTitle = '一级新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'addChild':
          this.modalTitle = '子级新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '编辑'
          this.dialogFormVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        case 'copy':
          console.log('复制')
          break
        case 'paste':
          console.log('粘贴')
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>
<style lang="less" scoped>
.cata-log {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .card-table {
    height: 100%;
    .cata-left {
      float: left;
      width: 18%;
      height: 100%;
      border: 1px solid #EBEEF5;
      border-right: none;
      position: relative;
      display: flex;
      flex-direction: column;
      transition: all .2s;
      .cata-left-title {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        color: #666;
        background-color: #F5F7FA;
        border-bottom: 1px solid #EBEEF5;
      }
      .cata-left-tree {
        flex: 1;
        overflow: auto;
      }
      .handle {
        position: absolute;
        right: -18px;
        top: 50%;
        margin-top: -32px;
        z-index: 100;
        cursor: pointer;
      }
    }
    .cata-right {
      float: left;
      width: 82%;
      height: 100%;
      transition: all .2s;
      .el-tabs {
        height: 100%;
        box-shadow: inherit;
        /deep/ .el-tabs__content {
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
            .cata-tree {
              height: calc(100% - 24px);
              .el-scrollbar {
                height: 100%;
                .scrollbar-wrapper {
                  overflow-x: hidden;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
